<template>
  <div>
    <div class="search-history">
      <van-cell title="搜索历史">
        <div v-if="isDeleteShow" >
          <span class="delA" @click="$emit('SHistory')">全部删除</span>&nbsp;
          <span @click="(isDeleteShow = false)">完成</span>
        </div>
        <van-icon name="delete-o" v-else @click="(isDeleteShow = true)"/>
      </van-cell>  
      
      <van-cell v-for="(item,index) in searchHistoryText"
          :key="index"
          :title="item"
          @click="delFnB(item,index)"
      >
        <van-icon name="cross" v-if="isDeleteShow" />
      </van-cell>
        
      
    </div>
  </div>
</template>

<script>
export default {
    name:'SearchHistory',
    props:{
      searchHistoryText:{
        type:Array,
        required:true
      }
    },
    data() {
      return {
        isDeleteShow: false, //控制删除显示
      }
    },
    methods:{
      // delFnA(){
      //   this.searchHistoryText = []
      //   this.$emit('SHistory') //传回到主页面
      // },
      delFnB(item,index){
        if(this.isDeleteShow){
            //删除状态，则删除历史记录
            this.searchHistoryText.splice(index,1)
            this.$emit('SHistory',this.searchHistoryText) //传回到主页面
        }else{
            //非删除状态，则进入搜索
            this.$emit('search',item)
        }
      }
    }
}
</script>

<style lang="less" scoped>
</style>